import { Button } from 'antd';
import { memo, useContext, useEffect, useMemo, useState } from 'react';
import { ImageEditorContext } from '../context';
import { EMarkTool } from '../microPalette/types/BasePalette.type';
import { ToolBarView } from './styled';
export const ToolBar = memo((props) => {
  const { paletteInstance } = useContext(ImageEditorContext);
  const [segmentationMask, setSegmentationMask] = useState<any>(null);
  useEffect(() => {
    paletteInstance?.on('setSegmentationMask', setSegmentationMask);
    return () => {
      paletteInstance?.off('setSegmentationMask', setSegmentationMask);
    };
  }, [paletteInstance]);

  const BtnRender = useMemo(() => {
    // console.log('-----segmentationMask-----:');
    return ['AUTO_SELECT', 'AUTO_MINUS', 'BRUSH', 'ERASER'].map((text) => (
      <Button
        key={text}
        type="primary"
        size="small"
        disabled={text === 'AUTO_MINUS' && !segmentationMask ? true : false}
        onClick={() => {
          paletteInstance?.setMarkTool(text as EMarkTool);
        }}
      >
        {text}
      </Button>
    ));
  }, [paletteInstance, segmentationMask]);

  return <ToolBarView>{BtnRender}</ToolBarView>;
});
